<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>包含块</title>
    <style>
      body {
        background-color: beige;
      }

      section {
        /*  position: absolute;
        left: 30px;
        top: 30px; */
        width: 400px;
        height: 160px;
        /* margin: 30px;
        padding: 15px; */
        transform: rotate(90deg);
        background-color: lightgray;
      }

      p {
        position: absolute;
        left: 80px;
        top: 30px;
        width: 50%;
        height: 25%; /* height、top、bottom基于包含块的height，其他都是基于包含块的width */
        margin: 5%;
        padding: 5%;
        /* border: 5% solid red; */ /* border不能设置百分比 */
        background-color: cyan;
      }
    </style>
  </head>
  <body>
    <section>
      <p>这是一个包含块</p>
    </section>
  </body>
</html>
